<!-- components/navigation/HeaderBar.vue -->
<template>
  <header class="main-header">
    <!-- 左侧：品牌Logo和系统名称 -->
    <div class="header-left">
      <img src="@/assets/logo.svg" alt="灵犀" class="logo" @click="goToDashboard">
      <h1 class="system-name">小采灵犀智能对账系统</h1>
    </div>
    
    <!-- 右侧：用户操作区 -->
    <div class="header-right">
      <!-- 组织切换器 -->
      <OrganizationSwitcher />
      
      <!-- 主题切换 -->
      <ThemeToggle />
      
      <!-- 消息通知 -->
      <el-badge :value="unreadCount" :max="99" class="notification-badge" type="danger">
        <el-button circle @click="showNotifications" class="notification-btn">
          <el-icon><Bell /></el-icon>
        </el-button>
      </el-badge>
      
      <!-- 用户头像和下拉菜单 -->
      <el-dropdown @command="handleUserCommand" class="user-dropdown">
        <div class="user-profile">
          <el-avatar :size="32" :src="user?.avatar || ''" class="user-avatar">
            <el-icon><User /></el-icon>
          </el-avatar>
          <span class="user-name">{{ user?.name }}</span>
          <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown-menu">
            <el-dropdown-item command="profile" class="dropdown-item">
              <el-icon><User /></el-icon>个人中心
            </el-dropdown-item>
            <el-dropdown-item command="settings" class="dropdown-item">
              <el-icon><Setting /></el-icon>系统设置
            </el-dropdown-item>
            <el-divider />
            <el-dropdown-item divided command="logout" class="dropdown-item logout">
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores/appStore'
import { Bell, User, Setting, SwitchButton, ArrowDown } from '@element-plus/icons-vue'
import ThemeToggle from '@/components/navigation/ThemeToggle.vue'
import OrganizationSwitcher from '@/components/OrganizationSwitcher.vue'

const appStore = useAppStore()
const router = useRouter()

const user = computed(() => appStore.user)
const unreadCount = computed(() => appStore.unreadCount)

const goToDashboard = () => {
  router.push('/dashboard')
}

const showNotifications = () => {
  console.log('显示通知抽屉')
  // 这里可以打开通知抽屉或弹窗
}

const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      console.log('前往个人中心')
      break
    case 'settings':
      console.log('前往系统设置')
      break
    case 'logout':
      // 模拟退出登录
      appStore.setUser(null)
      router.push('/login')
      break
  }
}
</script>

<style scoped>
/* 顶部导航栏 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: linear-gradient(135deg, var(--header-bg, #ffffff) 0%, #fafafa 100%);
  border-bottom: 1px solid var(--header-border, #f0f0f0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.logo {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: rotate(15deg) scale(1.1);
}

.system-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary-blue, #1890ff) 0%, var(--ai-purple, #722ed1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 通知按钮 */
.notification-btn {
  transition: all 0.3s ease;
}

.notification-btn:hover {
  background: var(--menu-hover-bg, rgba(24, 144, 255, 0.1));
  transform: translateY(-1px);
}

.notification-btn:hover .el-icon {
  color: var(--primary-blue, #1890ff);
}

.notification-badge :deep(.el-badge__content) {
  background-color: var(--error-red, #f5222d);
  border: none;
}

/* 用户资料样式 */
.user-profile {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-profile:hover {
  background: rgba(0, 0, 0, 0.04);
}

.user-profile:hover .user-avatar {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.user-profile:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.user-avatar {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--primary-blue, #1890ff), var(--ai-purple, #722ed1)) border-box;
}

.user-name {
  margin: 0 8px;
  font-weight: 500;
  color: var(--header-text, #262626);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
  color: #8c8c8c;
}

/* 下拉菜单样式 */
.user-dropdown-menu {
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin: 0 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.dropdown-item .el-icon {
  margin-right: 8px;
  color: var(--header-text-secondary, #595959);
}

.dropdown-item span {
  color: var(--header-text, #262626);
}

.dropdown-item:hover {
  background: rgba(24, 144, 255, 0.08);
}

.dropdown-item:hover .el-icon,
.dropdown-item:hover span {
  color: var(--primary-blue, #1890ff);
}

.dropdown-item.logout:hover {
  background: rgba(245, 34, 45, 0.08);
}

.dropdown-item.logout:hover .el-icon,
.dropdown-item.logout:hover span {
  color: var(--error-red, #f5222d);
}

/* 移动端适配 */
@media (max-width: 767px) {
  .main-header {
    background: var(--header-bg, #ffffff);
  }
  
  .user-name {
    display: none;
  }
}
</style>